<template>
	<div style="position: relative; z-index: 0; height: 100vmin;">
		<div style="width: 98%; margin-left:1%;margin-top: 2%; background-color:#171717 ;">
			<div class="mn_top">
				<div style="display: inline-block; color: #fff;font-size: 30px;">管理云服务器</div>
				<span style="display: inline-block;margin-left: 20px;color: #00afe0;cursor: pointer;"
					@click="toHome()">我的产品
				</span>
				<span style="color: #fff;padding: 0 5px;">&gt</span>
				<span style="display: inline-block;color: #fff;">管理云服务器 </span>
			</div>

			<div class="action" style="background-color: #171717; margin-top: 20px;border-radius: 5px;">
				<el-button class="control" style="margin-left: 2%;" @click="power('start')" v-loading="isClick"
					:disabled="isClick">开机</el-button>
				<el-button class="control" @click="power('compel_restart')" v-loading="isClick"
					:disabled="isClick">重启</el-button>
				<el-button class="control" @click="power('compel_shut')" v-loading="isClick"
					:disabled="isClick">关机</el-button>
			</div>

			<div class="mn_main"
				style="position: absolute;width: 90%; margin-top: 20px; border-radius: 5px; background-color: #171717;height: 100vmin;">
				<div id="main_top">
					<div class="scro message" style="margin-left: 20px;" @click="toPage('controll')">信息与监控</div>
					<div class="scro disk" @click="toPage('elasticity')">弹性云盘
					</div>
					<div class=" scro disk" @click="toPage('backups')">备份还原
					</div>
					<div class=" scro port " @click=" toPage('nat')">NAT端口映射</div>
					<div class=" scro wall" @click="toPage('firewall')">防火墙规则</div>
					<div class="scro system" @click="toPage('system')">
						更换或重装系统</div>
					<div class="scro renew" @click="toPage('renew')" style="border-bottom: 2px solid #00afe0;">续费</div>
				</div>
				<div>
					<div class="mt" style="color: #fff;margin: 2% 0 2% 2%;padding-bottom: 1%;">
						<div style="font-size: 20px;margin-bottom: 20px;">续费云服务器</div>
						<div style="font-size: 14px;">续费云服务器 ID: <b
								style="color: #00afe0;">{{this.renewData.serverId}}</b></div>
						<div style="font-weight: 100;font-size: 12px;margin: 10px 0;">
							目前到期时间：{{this.renewData.expireTime}}</div>
						<button
							style="color: #fff;border: 1px solid #fff;padding: 10px 50px;border-radius: 5px;cursor: pointer;"
							@click="toPay()">→
							立即续费</button>
					</div>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	import {
		controlPower,
		getMachineInfo
	} from '../../../api/work.js'
	export default {
		data() {
			return {
				useBackup: false,
				renewData: {}
			}
		},
		mounted() {
			this.getMachineInfoByPage()
		},
		methods: {
			power(e) {
				this.isClick = true
				let data = {
					encrypt_robot_id: this.$route.query.data,
					type: e,
					user_id: localStorage.getItem('userid')
				}
				// 控制开关机
				controlPower(data).then(res => {
						if (res.message === '签名验证失败') {
							this.$message.warning('请求过于频繁， 请稍后重试')
						} else {
							// 请求成功，处理返回的数据
							this.$message({
								message: res.message,
								type: 'success',
							});
						}
						this.isClick = false
					})
					.catch(error => {
						// 请求失败，处理错误信息
						this.error = error;
						this.$message.warning('出现未知错误, 请联系管理员')
					});
			},
			toHome() {
				this.$router.push('/demo/mygoods')
			},
			toPage(e) {
				var pageUrl = "/demo/" + e
				this.$router.push({
					path: pageUrl,
					query: {
						data: this.$route.query.data
					}
				})
			},
			toPay() {
				this.$router.push({
					path: '/demo/mb_goods_details',
					query: {
						id: this.$route.query.data,
						type: 1
					}
				})
			},
			getMachineInfoByPage() {
				let data = {
					encryptRobotId: localStorage.getItem("Mechine_id")
				}
				getMachineInfo(data).then(res => {
					console.log(res)
					this.renewData = res
				})
			}

		}
	}
</script>

<style scoped>
	* {
		box-sizing: border-box;
		background-color: #171717;
	}

	a {
		text-decoration: none !important;
		color: #3EB6C2;
		border: none;
	}

	.mn_top {
		height: 60px;
		margin-top: 20px;
		background-color: #171717;
		line-height: 20px;
		border-radius: 5px;
	}

	.control {
		display: inline-block;
		cursor: pointer;

		margin: 10px 10px;
		padding: 7px 30px;

		background-color: #2f2f2f;
		border-radius: 6px;
		box-shadow: 0 0 5px #ffffff;
		color: #fff;

	}

	.scro {
		display: inline-block;
		cursor: pointer;
		font-size: 14px;
		font-weight: 700;
		padding: 8px 12px;

		color: #fff;
	}

	.mr_title {
		height: 50px;
		font-size: 14px;
		font-weight: 700;
		border: 1px solid #a3a3a3;
		padding-left: 10px;
		line-height: 50px;
	}
</style>